<template>
  <Menu
    width="auto"
    ref="menu"
    class="layout-menu"
    accordion
    :active-name="getActiveMenuName"
    @on-select="onSelectMenu"
    @on-open-change="onOpenChangeMenu"
    :open-names="openNames"
  >
    <template v-for="item in menuData">
      <template v-if="item.children.length > 0">
        <Submenu :name="item.name" :key="item.id" class="divider">
          <template slot="title">
            <Icon :custom="item.icon" size="20" />
            {{ item.name }}
          </template>
          <MenuItem
            ref="menuItem"
            v-for="child in item.children"
            :name="child.url"
            :to="child.url"
            :key="child.id"
          >
            <div class="title">
              {{ child.name }}
            </div>
            <div class="bg"></div>
            <div class="radius"></div>
          </MenuItem>
        </Submenu>
      </template>
      <template v-else>
        <MenuItem
          ref="menuItem"
          :name="item.url"
          :to="item.url"
          :key="item.id"
          class="divider"
        >
          <Icon :custom="item.icon" size="18" />
          {{ item.name }}
        </MenuItem>
      </template>
    </template>
  </Menu>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "layout-menu",
  props: {
    menuData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      openNames: JSON.parse(sessionStorage.getItem("openNames")) || []
      // activeName: '',
    };
  },
  watch: {
    getIsCollapsed() {
      this.update();
    },
    $route(val) {
      if (!this.getIsCollapsed) {
        this.setActiveMenuName(val.path);
        this.$nextTick(() => {
          this.refsmenu = this.$refs.menuItem;

          if (this.refsmenu) {
            this.refsmenu.forEach(item => {
              if (item.active === true) {
                this.openNames = [item.$parent.name];
              }
            });
            this.$nextTick(() => {
              this.$refs.menu.updateOpened();
            });
          } else {
            this.openNames = [];
            sessionStorage.setItem("openNames", JSON.stringify(this.openNames));
          }
        });
      } else {
        console.log(val);
        this.$nextTick(() => {
          this.$refs.menu.updateOpened();
        });
      }
    }
  },
  computed: {
    ...mapGetters({
      getActiveMenuName: "tagsView/getActiveMenuName",
      getIsCollapsed: "layoutMenu/getIsCollapsed"
    })
  },
  methods: {
    ...mapActions({
      setActiveMenuName: "tagsView/setActiveMenuName",
      setCollapsedStatus: "layoutMenu/setCollapsedStatus"
    }),
    update() {
      const openNames = JSON.parse(sessionStorage.getItem("openNames")) || [];
      console.log(openNames);
      if (openNames) {
        this.openNames = openNames || [];
        this.$nextTick(() => {
          this.$refs.menu.updateOpened();
          this.$refs.menu.updateActiveName();
        });
      }
    },
    /**
     * 选择菜单
     */
    onSelectMenu(name) {
      const rs = name.split(",");
      sessionStorage.setItem("openNames", JSON.stringify(rs));
    },
    /**
     * 菜单展开
     */
    onOpenChangeMenu(name) {
      // console.log(name)

      this.openNames = name;
      sessionStorage.setItem("openNames", JSON.stringify(this.openNames));
    },
    handlerCollaspedSelect(item, cItem) {
      if (cItem === "") {
        this.openNames = [item.name];
      } else {
        this.openNames = [cItem.name];
      }
      sessionStorage.setItem("openNames", JSON.stringify(this.openNames));
      this.setActiveMenuName(item.url);
    }
  }
};
</script>
<style lang="scss">
.layout-menu {
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  &:after {
    content: "" !important;
    width: 0 !important;
  }
}
</style>
